<template>
  <div class="office_index">
    <div class="flex main">
      <div class="flex-1 left">
        <div class="m-auto model_wrap">
          <img class="block w-100" src="../../assets/images/nine-header.jpg" />
          <template v-for="(item, index) in sectionList">
            <div
              :key="index"
              class="section_wrap"
              :class="{ active: index + 1 == activeNum }"
              @click="activeNum = index + 1"
            >
              <img
                class="block w-100"
                :src="require('../../assets/images/nine' + item.imgName)"
                :alt="item.title"
              />
            </div>
          </template>
        </div>
      </div>
      <div class="right">
        <h5 class="color-666 normal-font header">
          {{ sectionList[activeNum - 1].title }}
        </h5>
        <div class="main_form">
          <el-row class="upload-box" style="height:40px;">
            <el-col :span="6">
              <div class="img-label" style="height:40px;">背景色</div>
            </el-col>
            <el-col :span="6">
              <el-color-picker v-model="item.background"></el-color-picker>
            </el-col>
          </el-row>
          <el-row class="upload-box" style="height:400px;">
            <el-col :span="6">
              <div style="height:400px;" class="img-label">设置banner</div>
            </el-col>
            <el-col :span="6">
              <div class="upload-content">
                <crop-upload
                  class="w-100 img_wrap"
                  show-type="photo"
                  :init-val="item.banner"
                  wrapper-width="375px"
                  wrapper-height="400px"
                  :img-width="375"
                  :isCheckSize="false"
                  :img-height="400"
                  :photo-width="375"
                  :photo-height="400"
                  @setVal="
                    (val) => {
                      item.banner = val;
                    }
                  "
                ></crop-upload>
              </div>
            </el-col>
          </el-row>
          <el-row class="upload-box" style="height:120px;">
            <el-col :span="6">
              <div style="height:120px;" class="img-label">标题图标</div>
            </el-col>
            <el-col :span="6">
              <div class="upload-content">
                <crop-upload
                  class="w-100 img_wrap"
                  show-type="photo"
                  :init-val="item.icon"
                  wrapper-width="375px"
                  wrapper-height="120px"
                  :img-width="375"
                  :isCheckSize="false"
                  :img-height="120"
                  :photo-width="375"
                  :photo-height="120"
                  @setVal="
                    (val) => {
                      item.icon = val;
                    }
                  "
                ></crop-upload>
              </div>
            </el-col>
          </el-row>
          <comp-form
            ref="compForm"
            :goods-num="sectionList[activeNum - 1].num"
            :level-name="sectionList[activeNum - 1].key"
          />
        </div>
        <div class="text-center footer">
          <el-button
            style="width: 200px"
            size="small"
            type="primary"
            @click="save"
            >保存</el-button
          >
        </div>
      </div>
    </div>
    <div class="fix-footer-btns">
      <!-- <el-button
        size="small"
        @click="preview"
      >预览</el-button> -->
      <el-button size="small" type="primary" @click="submit">发布</el-button>
    </div>
  </div>
</template>

<script>
import { getActivityPage, editActivityPage, release } from "../../api/xcx";
import cropUpload from "../../components/cropUpload.vue";
import compForm from "./components/compForm";
export default {
  components: { compForm, cropUpload },
  data() {
    return {
      activeNum: 1,
      pageId: "",
      configData: {},
      item: {
        banner: "",
        icon: "",
        background: "",
      },
      pageType: "办公设备",
    };
  },
  computed: {
    sectionList() {
      switch (this.pageType) {
        case "办公设备":
          return [
            {
              title: "商品（1+3）推荐位",
              key: "first_level",
              imgName: "1.jpg",
              num: 4,
            },
            {
              title: "商品（3+4）推荐位",
              key: "second_level",
              imgName: "2.jpg",
              num: 7,
            },
            {
              title: "商品（9）推荐位",
              key: "third_level",
              imgName: "3.jpg",
              num: 9,
            },
          ];
        case "电脑设备":
          return [
            {
              title: "商品（3）推荐位",
              key: "first_level",
              imgName: "5.jpg",
              num: 3,
            },
            {
              title: "商品（3+4）推荐位",
              key: "second_level",
              imgName: "7.jpg",
              num: 6,
            },
            {
              title: "商品（9）推荐位",
              key: "third_level",
              imgName: "3.jpg",
              num: 9,
            },
          ];
        case "智能穿戴":
          return [
            {
              title: "商品（3）推荐位",
              key: "first_level",
              imgName: "4.jpg",
              num: 3,
            },
            {
              title: "商品（3+4）推荐位",
              key: "second_level",
              imgName: "2.jpg",
              num: 7,
            },
            {
              title: "商品（9）推荐位",
              key: "third_level",
              imgName: "3.jpg",
              num: 9,
            },
          ];
        case "苹果手机":
          return [
            {
              title: "商品（1+4）推荐位",
              key: "first_level",
              imgName: "6.jpg",
              num: 5,
            },
            {
              title: "商品（1+4）推荐位",
              key: "second_level",
              imgName: "6.jpg",
              num: 5,
            },
          ];
        case "安卓手机":
          return [
            {
              title: "商品（1+4）推荐位",
              key: "first_level",
              imgName: "6.jpg",
              num: 5,
            },
            {
              title: "商品（1+4）推荐位",
              key: "second_level",
              imgName: "6.jpg",
              num: 5,
            },
          ];
        case "大牌平板":
          return [
            {
              title: "商品（3）推荐位",
              key: "first_level",
              imgName: "4.jpg",
              num: 3,
            },
            {
              title: "商品（3+4）推荐位",
              key: "second_level",
              imgName: "2.jpg",
              num: 7,
            },
            {
              title: "商品（9）推荐位",
              key: "third_level",
              imgName: "3.jpg",
              num: 9,
            },
          ];
        case "游戏设备":
          return [
            {
              title: "商品（1+3）推荐位",
              key: "first_level",
              imgName: "1.jpg",
              num: 4,
            },
            {
              title: "商品（3+4）推荐位",
              key: "second_level",
              imgName: "2.jpg",
              num: 7,
            },
            {
              title: "商品（9）推荐位",
              key: "third_level",
              imgName: "3.jpg",
              num: 9,
            },
          ];
        case "大牌耳机":
          return [
            {
              title: "商品（3）推荐位",
              key: "first_level",
              imgName: "5.jpg",
              num: 3,
            },
            {
              title: "商品（3+4）推荐位",
              key: "second_level",
              imgName: "7.jpg",
              num: 6,
            },
            {
              title: "商品（9）推荐位",
              key: "third_level",
              imgName: "3.jpg",
              num: 9,
            },
          ];
        case "游戏掌机":
          return [
            {
              title: "商品（3）推荐位",
              key: "first_level",
              imgName: "4.jpg",
              num: 3,
            },
            {
              title: "商品（3+4）推荐位",
              key: "second_level",
              imgName: "2.jpg",
              num: 7,
            },
            {
              title: "商品（9）推荐位",
              key: "third_level",
              imgName: "3.jpg",
              num: 9,
            },
          ];
        case "智能手表":
          return [
            {
              title: "商品（1+3）推荐位",
              key: "first_level",
              imgName: "1.jpg",
              num: 4,
            },
            {
              title: "商品（3+4）推荐位",
              key: "second_level",
              imgName: "2.jpg",
              num: 7,
            },
            {
              title: "商品（9）推荐位",
              key: "third_level",
              imgName: "3.jpg",
              num: 9,
            },
          ];
        case "花呗专区":
          return [
            {
              title: "商品（3）推荐位",
              key: "first_level",
              imgName: "4.jpg",
              num: 3,
            },
            {
              title: "商品（3+4）推荐位",
              key: "second_level",
              imgName: "2.jpg",
              num: 7,
            },
            {
              title: "商品（9）推荐位",
              key: "third_level",
              imgName: "3.jpg",
              num: 9,
            },
          ];
        case "热租爆品":
          return [
            {
              title: "商品（3）推荐位",
              key: "first_level",
              imgName: "4.jpg",
              num: 300,
            },
            {
              title: "商品（3+4）推荐位",
              key: "second_level",
              imgName: "2.jpg",
              num: 700,
            },
            {
              title: "商品（9）推荐位",
              key: "third_level",
              imgName: "3.jpg",
              num: 9,
            },
          ];
        case "短租精选":
          return [
            {
              title: "商品（3）推荐位",
              key: "first_level",
              imgName: "4.jpg",
              num: 3,
            },
            {
              title: "商品（3+4）推荐位",
              key: "second_level",
              imgName: "2.jpg",
              num: 7,
            },
            {
              title: "商品（9）推荐位",
              key: "third_level",
              imgName: "3.jpg",
              num: 9,
            },
          ];
        case "租完即送":
          return [
            {
              title: "商品（1+3）推荐位",
              key: "first_level",
              imgName: "1.jpg",
              num: 4,
            },
            {
              title: "商品（3+4）推荐位",
              key: "second_level",
              imgName: "2.jpg",
              num: 7,
            },
            {
              title: "商品（9）推荐位",
              key: "third_level",
              imgName: "3.jpg",
              num: 9,
            },
          ];
        default:
          return [];
      }
    },
  },
  watch: {
    activeNum(val) {
      if (val) {
        this.setData(val);
      }
    },
  },
  mounted() {
    this.pageType = this.$route.meta.title;
    this.getData();
  },
  methods: {
    submit() {
      release(this.pageId).then((res) => {});
    },
    setData(pos) {
      const key = this.sectionList[pos - 1].key;
      const data = {
        main_title: this.configData[key].main_title || "",
        goods: this.configData[key].goods || [],
      };
      this.$nextTick(() => {
        this.$refs.compForm.formData = data;
      });
    },
    getData() {
      getActivityPage().then((res) => {
        const result = res.find((item) => item.title === this.pageType);
        if (result) {
          this.pageId = result.id;
          this.configData = result.details
            ? JSON.parse(result.details)
            : {
                first_level: {
                  goods: [],
                  main_title: "",
                },
                second_level: {
                  goods: [],
                  main_title: "",
                },
                third_level: {
                  goods: [],
                  main_title: "",
                },
              };
          console.log(this.configData)
          this.item = {
            background:this.configData.background,
            icon:this.configData.icon,
            banner:this.configData.banner
          }
          this.setData(this.activeNum);
        }
      });
    },
    save() {
      const params = this.$refs.compForm.save();
      if (params) {
        editActivityPage({
          id: this.pageId,
          ...params,
          ...this.item
        }).then((res) => {
          this.getData();
        });
      }
    },
    preview() {},
    release() {},
  },
  beforeRouteUpdate(to, from, next) {
    this.activeNum = 1;
    this.pageType = to.$route.meta.title;
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.office_index {
  padding: 0;
  .main {
    height: 73vh;
  }
  .left {
    padding: 30px;
    background-color: #f5f5f5;
    overflow: auto;
  }
  .model_wrap {
    width: 375px;
    & > div.active {
      border: 1px solid $mainBlue;
    }
  }
  .right {
    width: 520px;
    overflow-y: auto;
    .header {
      padding: 15px;
      border-bottom: 1px solid #eeeeee;
    }
    .footer {
      padding: 15px 0;
      border-top: 1px solid #eeeeee;
    }
  }
  .main_form {
    padding: 15px 20px;
  }
}
.img-label {
  display: flex;
  align-items: center;
  height: 100%;
}
.upload-box {
  width: 380px;
  height: 400px;
  margin-bottom: 20px;
}
.upload-content {
  height: 100%;
  display: flex;
  align-items: center;
}
</style>
